<script setup lang="ts">
import { imagePath } from '@/libs/file-utils'
import { showLuckyMask, luckyDetail } from './data'

const lucky_detail = imagePath('main/home/lucky-detail.png')
const icon_close = imagePath('main/home/icon-close.png')
</script>

<template>
  <MaskWrapper v-model:show="showLuckyMask">
    <div
      class="lucky-detail"
      :style="{ backgroundImage: lucky_detail }"
    >
      <div class="title">{{ luckyDetail.title }}</div>
      <div class="info">{{ luckyDetail.info }}</div>
      <div
        class="close"
        :style="{ backgroundImage: icon_close }"
        @click="showLuckyMask = false"
      ></div>
    </div>
  </MaskWrapper>
</template>

<style lang="less" scoped>
.lucky-detail {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 468rpx;
  height: 568rpx;

  box-sizing: border-box;
  padding: 100rpx 110rpx;

  color: #7A3C36;

  .title {
    font-size: 40rpx;
    line-height: 58rpx;
  }

  .info {
    margin-top: 32rpx;

    font-size: 32rpx;
    line-height: 46rpx;
  }

  .close {
    position: absolute;
    top: calc(100% + 10rpx);
    left: 50%;
    transform: translateX(-50%);

    width: 76rpx;
    height: 76rpx;
  }
}
</style>